<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>住客列表</title>
    <link rel="stylesheet" href="/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/css/style.css">
    <script src="/static/common/layui/layui.js"></script>
    <script src="/static/common/jquery-3.3.1.min.js"></script>
    <script src="/static/common/vue.min.js"></script>
    <style>
        #container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #search1, #search2, #search3 {
            display: flex;
            align-items: center;
            width: 380px;
        }

        .search-label {
            white-space: nowrap;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .search-input {
            flex: 1;
        }
    </style>
</head>
<body onload="loadData();">
<div id="app">
    <!--顶栏-->
    <%@include file="/views/top.jsp" %>

    <div class="main">
        <!--左栏-->
        <div class="left">
            <ul class="cl">
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                              class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                           v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <div class="layui-row">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>住客列表</legend>
                </fieldset>
                <%--搜索--%>
                <%--<form method="post" action="/book?action=query" >--%>
                <div class="layui-col-lg4" style="float: right" id="container">
                    <div class="layui-input-inline" style="width:320px ;float: left" id="search1">
                        <span class="search-label">姓名：</span>
                        <input type="text" name="name" placeholder="输入姓名进行查询"
                               class="layui-input key search-input">
                    </div>
                    <div class="layui-input-inline" style="width:320px ;float: left" id="search2">
                        <span class="search-label">身份证号：</span>
                        <input type="text" name="card" placeholder="输入身份证号进行查询"
                               class="layui-input key search-input">
                    </div>
                    <div class="layui-input-inline" style="width:320px ;float: left" id="search3">
                        <span class="search-label">手机号：</span>
                        <input type="text" name="phone" placeholder="输入手机号进行查询"
                               class="layui-input key search-input">
                    </div>
                    <div style="float: right">
                        <button type="button" class="layui-btn layui-btn-normal" style="width: 100px"
                                onclick="loadData();">查询
                        </button>
                    </div>
                </div>
                <%--</form>--%>

            </div>

            <%--表格 --%>
            <table class="layui-table layui-form">

                <thead>
                <tr>
                    <th style="width: 30px">编号</th>
                    <th style="width: 60px">姓名</th>
                    <th style="width: 30px">性别</th>
                    <th style="width: 150px">身份证号</th>
                    <th style="width: 100px">手机号</th>
                    <th style="width: 50px">房间号</th>
                    <th style="width: 145px">房间类型</th>
                    <th style="width: 165px">入住时间</th>
                    <th style="width: 165px">退房时间</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>

                </tbody>
            </table>

        </div>
    </div>
</div>
<script src="/static/admin/js/config.js"></script>
<script src="/static/admin/js/script.js"></script>
<script>

    // 格式化 LocalDateTime 对象
    function formatLocalDateTime(dateTimeObj) {
        if (!dateTimeObj) return ''; // 如果为 null 或 undefined，返回空字符串

        // 如果已经是字符串格式，直接返回
        if (typeof dateTimeObj === 'string') return dateTimeObj;

        // 如果是 LocalDateTime 对象，正确解析其结构
        if (dateTimeObj && typeof dateTimeObj === 'object') {
            // 检查 LocalDateTime 的实际结构
            //console.log("DateTime object structure:", dateTimeObj);

            // 根据实际返回的 LocalDateTime 结构进行解析
            if (dateTimeObj.date && dateTimeObj.time) {
                // 如果结构包含 date 和 time 对象
                let datePart = dateTimeObj.date;
                let timePart = dateTimeObj.time;

                let year = datePart.year;
                let month = datePart.month;
                let day = datePart.day;

                let hour = timePart.hour || 0;
                let minute = timePart.minute || 0;
                let second = timePart.second || 0;

                // 格式化为 YYYY-MM-DD HH:mm:ss 格式
                return year + '-' +
                    (month < 10 ? '0' + month : month) + '-' +
                    (day < 10 ? '0' + day : day) + ' ' +
                    (hour < 10 ? '0' + hour : hour) + ':' +
                    (minute < 10 ? '0' + minute : minute) + ':' +
                    (second < 10 ? '0' + second : second);
            } else if (dateTimeObj.year !== undefined) {
                // 如果直接包含年月日等属性
                let year = dateTimeObj.year;
                let month = dateTimeObj.monthValue || dateTimeObj.month;
                let day = dateTimeObj.dayOfMonth || dateTimeObj.day;
                let hour = dateTimeObj.hour || 0;
                let minute = dateTimeObj.minute || 0;
                let second = dateTimeObj.second || 0;

                return year + '-' +
                    (month < 10 ? '0' + month : month) + '-' +
                    (day < 10 ? '0' + day : day) + ' ' +
                    (hour < 10 ? '0' + hour : hour) + ':' +
                    (minute < 10 ? '0' + minute : minute) + ':' +
                    (second < 10 ? '0' + second : second);
            }
        }

        return ''; // 如果无法解析，返回空字符串
    }

    // 删除
    function deleteGuest(id){
        if(confirm("确定要删除吗？")){
            $.post("/book?action=delete",{"id":id},function (data) {
                if(data === "true"){
                    $("#" + id).remove(); // 删除整行
                    alert("删除成功");
                } else if(data === "false"){
                    alert("删除失败");
                } else{
                    alert(data);
                }
            });
        }
    }

    // 退房
    function exitHome(id,home_id){
        if(confirm("确定要退房吗？")){
            $.post("/book?action=exitHome",{
                "id":id,
                "home_id": home_id
            },function (data) {
                if(data !== "false"){
                    $("#exitTime" +  id).text(formatLocalDateTime(data.exitTime));
                    alert("退房成功");
                }else{
                    alert("退房失败");
                }
            },"json");
        }
    }


    function loadData() {
        $.ajax({
            url: "/book?action=query",
            data: {
                "name": $("#search1").find("input").val(),
                "card": $("#search2").find("input").val(),
                "phone": $("#search3").find("input").val()
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                //console.log(data);
                // 清空现有数据
                $("tbody").empty();

                for (let i = 0; i < data.length; i++) {
                    // 格式化时间数据
                    let enterTime = formatLocalDateTime(data[i].enterTime);
                    let exitTime = formatLocalDateTime(data[i].exitTime); // 为 null 时会返回空字符串

                    let tr = `
                    <tr id="`+ data[i].id +`">
                        <td>` + data[i].id + `</td>
                        <td style="font-family: 宋体;font-weight: bold" >` + data[i].name + `</td>
                        <td>` + data[i].sex + `</td>
                        <td>` + data[i].card + `</td>
                        <td>` + data[i].phone + `</td>
                        <td>` + data[i].num + `</td>
                        <td>` + data[i].h_type + `</td>
                        <td>` + enterTime + `</td>
                        <td id="exitTime` + data[i].id + `">` + exitTime + `</td>
                        <td>
                            <a href="javascript:void(0);" onclick="deleteGuest(` + data[i].id + `)">删除</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a href="/book?action=goUpdate&id=` + data[i].id + `">修改</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a href="javascript:void(0);" onclick="exitHome(` + data[i].id + `,` + data[i].homeId + `)">退房</a>
                        </td>
                    </tr>
                    `;
                    $("tbody").append(tr);
                }
            }
        });
    }
</script>
</body>
</html>
